<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/home/css/userinfo.css">
    <title>Personal Center</title>
</head>
<body>

{include file="/index/head"/}

<div class="user-container">
    <div class="profile-container">
        <aside class="sidebar">
            <div class="profile-card">
                <div class="avatar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                </div>
                <h3 class="user-name">{$user.username}</h3>
                <div class="user-tier">Premium Member</div>
                <button class="btn btn-block" onclick="logOut()">Log Out</button>
            </div>

            <ul class="nav-menu">
                <li class="nav-item active" data-section="profile"><span>Information</span></li>
                <li class="nav-item" data-section="product"><span>Submitted Products</span></li>
                <li class="nav-item" data-section="design"><span>Design Solutions</span></li>
                <li class="nav-item" data-section="service"><span>After-Sales Service</span></li>
            </ul>
        </aside>

        <main class="content">

            <section id="profile-section" class="content-section active">
                <h2 class="section-title">Information</h2>
                <div class="info-grid">
                    <div class="info-label">Name</div>
                    <div class="info-value">{$user.username}</div>
                </div>
                <div class="info-grid">
                    <div class="info-label">Member ID</div>
                    <div class="info-value">{$user.id}</div>
                </div>
                <div class="info-grid">
                    <div class="info-label">Registration Date</div>
                    <div class="info-value">{$user.create_time}</div>
                </div>
                <!--<div class="info-grid">-->
                <!--    <div class="info-label">Contact Number</div>-->
                <!--    <div class="info-value">+86 138 1234 5678</div>-->
                <!--</div>-->
            </section>


            <section id="design-section" class="content-section">
                <h2 class="section-title">Design Solutions</h2>
                <div class="service-description">
                    <p>We provide professional wet-dry separation door system design services, with senior designers creating customized solutions for you.</p>
                    <p>Services include:</p>
                    <ul>
                        <li>On-site measurement and space evaluation</li>
                        <li>3D rendering presentation</li>
                        <li>Material and color matching suggestions</li>
                        <li>Personalized function customization</li>
                        <li>Installation plan design</li>
                    </ul>
                    <br/>
                    <p>To schedule a design service, please contact our design team: design@drywetdoors.com</p>
                </div>
            </section>


            <section id="service-section" class="content-section">
                <h2 class="section-title">After-Sales Service</h2>
                <div class="service-description">
                    <p>We provide comprehensive after-sales support for all products to ensure long-term stable operation of your wet-dry separation door system.</p>
                    <p>Services include:</p>
                    <ul>
                        <li>Free repairs during warranty period</li>
                        <li>24-hour emergency hotline</li>
                        <li>Regular maintenance</li>
                        <li>Replacement parts service</li>
                        <li>Usage guidance and consultation</li>
                    </ul>
                    <br/>
                    <div>
                        <p>For after-sales support, please contact our customer service team: service@drywetdoors.com</p>
                        <p>Or call our 24-hour service hotline: 400-888-5678</p>
                    </div>
                </div>
            </section>





            <section id="product-section" class="content-section">
                <h2 class="section-title">Submitted Products</h2>
                <!--<h2 class="section-title">提交的商品</h2>-->
                <div class="product-description">
                    <!--<p>No information available at the moment</p>-->

                    <p>Commit record</p>
                    <table style="width: 100%; border-collapse: collapse; overflow-y: auto;">
                        <thead>
                        <tr style="border-bottom: 1px solid #e0e0e0;">
                            <th style="text-align: left; padding: 12px 8px; font-weight: 500;">Product</th>
                            <th style="text-align: center; padding: 12px 8px; font-weight: 500;">Quantity</th>
                            <th style="text-align: right; padding: 12px 8px; font-weight: 500;">Total</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="order" id="value"}
                        <tr style="border-bottom: 1px solid #f5f5f5;">
                            <td style="padding: 16px 8px;">
                                <div style="display: flex; align-items: center; gap: 20px;">
                                    <div style="width: 60px; height: 60px; background: #f5f5f5;"></div>
                                    <div>
                                        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">Product Name</a>
                                        <div style="color: #999; font-size: 0.9em; margin-top: 4px;">{$value.attr.goods.name|default=''}</div>
                                    </div>
                                </div>
                            </td>
                            <td style="text-align: center; padding: 16px 8px; color: #666;">{$value.number}</td>
                            <td style="text-align: right; padding: 16px 8px; font-weight: 500;">${$value.price * $value.number}</td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>

                </div>
            </section>
        </main>
    </div>

    <footer class="footer">
        <p>Perfect Separation of Water and Space · Creating Elegant Wet-Dry Separation Solutions for You</p>
        <a href="./loginerror.html">sss</a>
    </footer>
</div>


{include file="/index/foot"/}



<script>
    document.addEventListener('DOMContentLoaded', function() {
        const navItems = document.querySelectorAll('.nav-item');

        navItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有active类
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });
                document.querySelectorAll('.content-section').forEach(section => {
                    section.classList.remove('active');
                });

                // 添加active类到当前点击的项
                this.classList.add('active');
                const sectionId = this.getAttribute('data-section') + '-section';
                document.getElementById(sectionId).classList.add('active');
            });
        });


        // window.addEventListener('resize', function() {

        // });
    });



    function logOut() {
        localStorage.removeItem("token");
        window.location.href = 'login.html';
    }
</script>
</body>
</html>